<!-- 我要承接 -->
<template>
  <client-only>
    <el-dialog
      v-model="visible"
      width="720px"
      title="详情"
      :z-index="1000"
      draggable
      :show-close="false"
    >
      <template #header="{ close, titleId, titleClass }">
        <div class="use-dialog-header">
          <div :id="titleId" :class="titleClass">详情</div>
          <div class="close">
            <el-icon @click="close">
              <CloseBold />
            </el-icon>
          </div>
        </div>
      </template>
      <div class="main">
        <div class="needTitle">
          <div class="stateTag">
            <div
              class="state"
              :class="{ finished: detailData.demandEntity?.status === 'FINISHED' }"
            >
              {{ filterEnum(detailData.demandEntity?.status, needStatus) }}
            </div>
            <div class="des">
              <template v-if="detailData.demandEntity?.status === 'UNDERWAY'"
                ><span>{{ detailData.demandEntity?.expirationDays }}天</span>后 截止 |
              </template>
              <span>{{ detailData.demandEntity?.participantCount }}次</span> 商家参与
            </div>
          </div>
          <div class="name">需求人：{{ detailData.demandEntity?.userName }}</div>
          <div class="name">需求类型：<span v-for="(item,index) in detailData.demandEntity?.serviceCategoryCodes" :key="index">{{filterEnum(item,categoryList,{label:'categoryName',value:'categoryCode'} )}}</span></div>
          <div class="labels">
            <span>
              <i class="iconfont icon-time"></i>发布时间：{{
                detailData.demandEntity?.createTime
              }}
            </span>
            <span>
              <i class="iconfont icon-time"></i>到期时间：{{
                detailData.demandEntity?.cutoffDate
              }}
            </span>
          </div>
        </div>
        <div class="content">
          <div class="title">
            {{ detailData.demandEntity?.title }}
          </div>
          <div class="textarea">
            {{ detailData.demandEntity?.detailDesc }}
          </div>
        </div>

        <div class="taking">
          <div class="use-title-icon">承接说明</div>
          <div>
            <span>手机号：</span><span>{{ detailData.acceptUserName }}</span>
          </div>
          <div>
            <span>姓名：</span><span>{{ detailData.acceptUserName }}</span>
          </div>
          <div><span>承接说明：</span><span>{{ detailData.acceptDesc }}</span></div>
        </div>

        <div class="btns">
          <div>
            <el-button round type="primary" @click="visible = false"
              >关闭</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </client-only>
</template>

<script setup>
import { storeToRefs } from "pinia";
const global = useStore.global();
const { categoryList } = storeToRefs(global);

const emit = defineEmits(["update"]);

const visible = ref(false);

const detailData = ref({});
const show = (id) => {
  visible.value = !visible.value;
  api.get(`/demandAcceptRecord/${id}`).then((res) => {
    detailData.value = res;
    if(detailData.value.demandEntity){
      detailData.value.demandEntity.serviceCategoryCodes = detailData.value.demandEntity.serviceCategoryCodes.split(',')
    }
  });
};

defineExpose({ show });
</script>
<style lang="scss" scoped>
.el-dialog__header {
  padding-bottom: 0 !important;
}
.main {
  // margin: 0 90px;
}

.captcha {
  flex: 1;
  margin-right: 10px;
}

.toggle {
  .el-button--text {
    color: var(--use-color-warning);
    font-size: 16px;
  }
}

.btns {
  width: 500px;
  margin: 32px auto 8px;

  .el-button {
    width: 100%;
    border-radius: 56px !important;
  }
}

.needTitle {
  border-bottom: 1px solid var(--use-color-line);
  padding-bottom: 16px;
  .name {
    line-height: 22px;
    margin-top: 12px;
    color: var(--use-color-info-light-2);
  }
  .labels {
    padding-top: 10px;
    line-height: 22px;
    color: var(--use-color-info-light-3);

    span {
      margin-right: 20px;

      .iconfont {
        margin-right: 7px;
      }
    }
  }
}
.content {
  line-height: 22px;
  color: var(--use-color-info-light-2);
  border-bottom: 1px solid var(--use-color-line);
  padding-bottom: 16px;
  margin-bottom: 16px;
  .title {
    margin-bottom: 12px;
    margin-top: 16px;
  }
}

.taking {
  color: var(--use-color-info-light-2);
  line-height: 22px;
  > div {
    display: flex;
    margin-bottom: 12px;
    span {
      &:nth-child(1) {
        width: 70px;
      }
      &:nth-child(2) {
        flex: 1;
      }
    }
  }
}
</style>
